<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Drawing an animated vector bar graph.</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.combined.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;
	var barPadding = 7;
	var barHeight;
	var maxValue = 50;
	var count;
	var barValues = [];
	var bars = [];

	function init() {
		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// generate some random data (between 4 and 10, the |0 floors (for positive numbers))
		var numBars = Math.random() * 6 + 4 | 0;
		var max = 0;
		for (var i = 0; i < numBars; i++) {
			var val = Math.random() * maxValue + 1 | 0;
			if (val > max) {
				max = val;
			}
			barValues.push(val);
		}

		// calculate the bar width and height based on number of bars and width of canvas:
		var barWidth = (canvas.width - 150 - (numBars - 1) * barPadding) / numBars;
		barHeight = canvas.height - 150;

		// create a shape to draw the background into:
		var bg = new createjs.Shape();
		stage.addChild(bg);

		// draw the "shelf" at the bottom of the graph:
		// note how the drawing instructions can be chained together.
		bg.graphics.beginStroke("#444850")
				.moveTo(40, canvas.height - 69.5)
				.lineTo(canvas.width - 70, canvas.height - 69.5)
				.endStroke()
				.beginFill("#22252B")
				.moveTo(canvas.width - 70, canvas.height - 70)
				.lineTo(canvas.width - 60, canvas.height - 80)
				.lineTo(50, canvas.height - 80)
				.lineTo(40, canvas.height - 70)
				.closePath();

		// draw the horizontal lines in the background:
		for (i = 0; i < 9; i++) {
			bg.graphics.beginStroke(i % 2 ? "#333840" : "#444850")
					.moveTo(50, (canvas.height - 80 - i / 8 * barHeight | 0) + 0.5)
					.lineTo(canvas.width - 60, (canvas.height - 80 - i / 8 * barHeight | 0) + 0.5);
		}

		// add the graph title:
		label = new createjs.Text("Quarterly Whatsits", "bold 24px Arial", "#FFF");
		label.textAlign = "center";
		label.x = canvas.width / 2;
		label.y = 20;
		stage.addChild(label);

		// draw the bars:
		for (i = 0; i < numBars; i++) {
			// each bar is assembled in its own Container, to make them easier to work with:
			var bar = new createjs.Container();

			// this will determine the color of each bar, save as a property of the bar for use in drawBar:
			var hue = bar.hue = i / numBars * 360;

			// draw the front panel of the bar, this will be scaled to the right size in drawBar:
			var front = new createjs.Shape();
			front.graphics.beginLinearGradientFill(
					[createjs.Graphics.getHSL(hue, 100, 60, 0.9),
					 createjs.Graphics.getHSL(hue, 100, 20, 0.75)],
					[0, 1],
					0,
					-100,
					barWidth, 0).drawRect(0, -100, barWidth + 1,
										  100);

			// draw the top of the bar, this will be positioned vertically in drawBar:
			var top = new createjs.Shape();
			top.graphics.beginFill(createjs.Graphics.getHSL(hue, 100, 70, 0.9))
					.moveTo(10, -10)
					.lineTo(10 + barWidth, -10)
					.lineTo(barWidth, 0)
					.lineTo(0, 0)
					.closePath();

			// if this has the max value, we can draw the star into the top:
			if (barValues[i] == max) {
				top.graphics.beginFill("rgba(0,0,0,0.75)").drawPolyStar(barWidth / 2, 31, 7, 5, 0.6, -90).closePath();
			}

			// prepare the side of the bar, this will be drawn dynamically in drawBar:
			var right = new createjs.Shape();
			right.x = barWidth - 0.5;

			// create the label at the bottom of the bar:
			var label = new createjs.Text("Q" + i, "bold 16px Arial", "#FFF");
			label.textAlign = "center";
			label.x = barWidth / 2;
			label.maxWidth = barWidth;
			label.y = 12;
			label.alpha = 0.75;

			// draw the tab that is placed under the label:
			var tab = new createjs.Shape();
			tab.graphics.beginFill(createjs.Graphics.getHSL(hue, 100, 20))
					.drawRoundRectComplex(0, 1, barWidth, 38, 0, 0, 10, 10);

			// create the value label that will be populated and positioned by drawBar:
			var value = new createjs.Text("foo", "bold 14px Arial", "#000");
			value.textAlign = "center";
			value.x = barWidth / 2;
			value.alpha = 0.75;

			// add all of the elements to the bar Container:
			bar.addChild(right, front, top, value, tab, label);

			// position the bar, and add it to the stage:
			bar.x = i * (barWidth + barPadding) + 60;
			bar.y = canvas.height - 70;

			stage.addChild(bar);
			bars.push(bar);

			// draw the bar with an initial value of 0:
			drawBar(bar, 0);
		}

		// set up the count for animation based on the number of bars:
		count = numBars * 10;

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		// if we are on the last frame of animation then remove the tick listener:
		if (--count == 1) {
			createjs.Ticker.removeEventListener("tick", tick);
		}

		// animate the bars in one at a time:
		var c = bars.length * 10 - count;
		var index = c / 10 | 0;
		var bar = bars[index];
		drawBar(bar, (c % 10 + 1) / 10 * barValues[index]);

		// update the stage:
		stage.update(event);
	}

	function drawBar(bar, value) {
		// calculate bar height:
		var h = value / maxValue * barHeight;

		// update the value label:
		var val = bar.getChildAt(3);
		val.text = value | 0;
		val.visible = (h > 28);
		val.y = -h + 10;

		// scale the front panel, and position the top:
		bar.getChildAt(1).scaleY = h / 100;
		bar.getChildAt(2).y = -h + 0.5; // the 0.5 eliminates gaps from numerical precision issues.

		// redraw the side bar (we can't just scale it because of the angles):
		var right = bar.getChildAt(0);
		right.graphics.clear()
				.beginFill(createjs.Graphics.getHSL(bar.hue, 60, 15, 0.7))
				.moveTo(0, 0)
				.lineTo(0, -h)
				.lineTo(10, -h - 10)
				.lineTo(10, -10)
				.closePath();
	}

</script>
</head>

<body onload="init();">
<header class="EaselJS">
	<h1>Bar Graph Example</h1>

	<p>Reload for new random data. Example of using the <code>Graphics</code>,
		<code>Shape</code>, <code>Text</code> and <code>Container</code> classes
		to draw a simple vector bar graph.
	</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"
			style="background: #111926"></canvas>
</div>

</body>
</html>
